<template>
  <div class="login-container">
    <div class="backdrop"></div>
    <div class="login-box">
      <div class="description">
        <h2>{{ time }},欢迎使用后台管理系统</h2>
      </div>
      <!-- 用户名 -->
      <el-form
        label-width="0px"
        class="login-form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        @keyup.enter.native="loginClick"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            suffix-icon="el-icon-user-solid"
            v-model="loginForm.username"
          >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            suffix-icon="el-icon-lock"
            v-model="loginForm.password"
          >
          </el-input>
        </el-form-item>
        <!-- 注册登录 -->
        <el-form-item class="btns">
          <el-button type="success" @click="loginClick">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onMounted } from "@vue/runtime-core";
import { getTime, throttle } from "../libs/utils";
import { useRouter } from "vue-router";
import { loginFormRules } from "../data/rules";
import { http } from "../services/http";
import { ElMessage, ElNotification } from "element-plus";
export default defineComponent({
  setup() {
    const router = useRouter();
    const loginForm = reactive({
      username: "访客账号",
      password: "123456",
    });
    const loginFormRef = ref(null);
    const time = ref("");
    const login = async () => {
      loginFormRef.value.validate(async (isPass) => {
        if (isPass) {
          http
            .post("login", loginForm)
            .then((res) => {
              if (res.status === 200) {
                const { token, user } = res.data;
                ElMessage.success(`欢迎 ${user.username}`);
                localStorage.token = token;
                router.push("/");
              } else {
                ElMessage.error("登录失败,请重试！");
              }
            })
            .catch((err) => {
              return err;
            });
        }
      });
    };
    const loginClick = throttle(login, 2000);
    onMounted(() => {
      time.value = getTime();
      ElNotification({
        dangerouslyUseHTMLString: true,
        message: "<strong>已默认填充访客账号和密码，可直接登录</strong>",
        offset: 100,
        duration: 0,
      });
    });
    return {
      loginForm,
      loginFormRules,
      loginClick,
      loginFormRef,
      time,
    };
  },
});
</script>

<style lang="scss" scoped>
.login-container {
  background: url(../assets/images/xk2.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.description {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 1rem;
  height: 75px;
  h2 {
    color: rgb(38, 38, 38);
    font-size: 23px;
    font-weight: 500;
  }
}
.login-box {
  width: 350px;
  height: 290px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-form {
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  text-align: center;
  .el-button {
    width: 100%;
  }
}
.backdrop {
  height: 100vh;
  width: 100vw;
  background: rgba(42, 42, 42, 0.69);
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}
</style>